<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>家苑充电</title>

  <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
  <div id="root">
    <div class="content">
      <img src="./bg1.png" alt="" class="bg">
      <div class="part1">
        <div class="part1-title">PART1  硬件服务</div>
        <img src="./bg2.png" alt="" style="width:100%;height:100%;position:relative;z-index:20;">
        <div class="part1-content">
          <div class="tip-card">
            <img src="./tip-icon.png" alt="" class="tip-card-icon">
            <div class="tip-card-text">
              <text>帮您</text>
              <text style="color:#E70000;">自主生产制造</text>
              <text> (专属设计图纸)  从7kw-240kw功率的交流与直流设备</text>
            </div>
          </div>
          <div class="sample">
            <div class="sample-item">
              <div class="sample-item-label">xxKw</div>
              <img src="./sample1.png" alt="" style="margin-top:1.2rem;width:100%;" onclick="preview('./sample1.png')">
            </div>
            <div class="sample-item">
              <div class="sample-item-label">xxKw</div>
              <img src="./sample2.png" alt="" style="margin-top:1.2rem;width:100%;" onclick="preview('./sample2.png')">
            </div>
            <div class="sample-item">
              <div class="sample-item-label">xxKw</div>
              <img src="./sample3.png" alt="" style="margin-top:1.2rem;width:100%;" onclick="preview('./sample3.png')">
            </div>
          </div>
          <div class="sample-text">-样品图片-</div>
          <div class="tip-card" style="margin-top: 4rem;">
            <img src="./tip-icon.png" alt="" class="tip-card-icon">
            <div class="tip-card-text">
              <text>协助您申请获得</text>
              <text style="color:#E70000;">充电桩相关认证报告，上设备财险保险过审，协助用户申请运营资质，研-产-销一体</text>
              <text>，铸造卓越的供应链体系，最终实现充电桩的自主生产和销售</text>
            </div>
          </div>
          <div class="title-card">报告图片示例</div>
          <div class="report-card">
            <img src="./report1.png" alt="" onclick="preview('./report1.png')" style="width:66.8rem;margin:0 auto;">
            <img src="./report2.png" alt="" onclick="preview('./report2.png')" style="width:66.8rem;margin:3.47rem auto;">
          </div>
        </div>
      </div>
      <div class="part2">
        <div class="part1-title">PART2 软件服务</div>
        <img src="./part2-bg.png" alt="" style="width:100%;height:100%;position:relative;z-index:20;">
        <div class="part2-content">
          <div class="part2-tip">
            <text>通过</text>
            <text style="color:#FCE0AB;">互联互通</text>
            <text>接通星星充电一个省的设备电站数据，接通您当地所在省的监管平台</text>
            <img src="./part2-tip-icon.png" alt="" class="part2-tip-icon">
          </div>
          <div class="part2-text">
            <text>深度融合物联网、互联网、云计算及大数据技术，自主开发</text>
            <text style="color:#E70000;">“人、车、桩、站”</text>
            <text>一体化SaaS平台，满足充电网管理运营与各式充电用户充电需求</text>
          </div>
          <div style="width:80.18rem;margin:3.2rem auto 3.07rem;">
            <img src="./part2-relative.png" alt="" style="width:100%">
          </div>
          <div class="part2-item">
            <div class="part2-item-title">系统成熟稳定</div>
            <text>无需投入技术研发即可以经济高效的方式获得和使用专业的电桩运营管理平台</text>
          </div>
          <div class="part2-item">
            <div class="part2-item-title">运营管理，效率更高</div>
            <text>平台功能全，设备强兼容，资金严管控；电桩管理+数据查看+营收情况随时掌握随时调控，提升运营效率</text>
          </div>
          <div class="part2-item">
            <div class="part2-item-title">便捷充电，服务更佳</div>
            <text>满足用户远程查看充电情况，可以远程结束充电；支持vin码识别即插即充</text>
          </div>
          <div class="part2-item">
            <div class="part2-item-title">企业充电运营平台</div>
            <text>独立开发上线企业运营平台，助力企业用户实现人、车、钱、桩等全方位充电智能管理</text>
          </div>
          <div class="part2-item">
            <div class="part2-item-title">实时查看数据</div>
            <text>多角度、全方位的场站订单分析数据，驱动智慧决策，促进业绩增长</text>
          </div>
        </div>
      </div>
      <div class="form">
        <div class="card">
          <div class="card-header" ondblclick="jump2mp()">如果您对新能源这个行业感兴趣 欢迎您的加入.</div>
          <div class="card-cell">
            <div class="cell-label">
              <span>您的姓名</span>
              <span class="err-tip" id="nameErr">请填写您的姓名</span>
            </div>
            <input id="username" placeholder="请输入" />
          </div>
          <div class="card-cell">
            <div class="cell-label">
              <span>您的电话</span>
              <span class="err-tip" id="phoneErr">请填写正确格式的手机号</span>
            </div>
            <input id="telephone" placeholder="请输入">
          </div>
          <div class="submit-btn" onclick="submit()">预约回电</div>
        </div>
      </div>
    </div>
  </div>
  <div class="error" id="error" onclick="hideError()">
    <div class="error-card">
      <img class="error-img" id="error-img" src="./success.png" />
      <div class="error-text" id="error-text">您已成功提交信息</div>
      <img class="error-close" onclick="hideError()" src="./close-icon.png" />
    </div>
  </div>
  <div class="preview" id="preview" onclick="hidePreview()">
    <img class="preview-image" id="preview-image" />
  </div>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="./index.js"></script>
</body>
</html>